<script>

    import { dropdown } from 'vue-strap'
    import {changeStyleMode,getUserInfo,logout } from '../vuex/actions'
    import defaultAvatar from '../assets/images/avatar.png'

    export default{
        components:{
            dropdown
        },
        methods:{
            changeMode(){
                this.changeStyleMode()
                document.body.className = this.styleMode
            }
        },
        created (){
            if(this.auth.token){
                this.getUserInfo()
            }
        },
        computed:{
            defaultAvatar(){
                return defaultAvatar
            }
        },
        vuex:{
            getters:{
                styleMode : state => state.globalVal.styleMode,
                auth : state => state.auth ,
            },
            actions:{
                changeStyleMode,
                getUserInfo,
                logout
            }
        }
    }
</script>

<template>
    <div class="navbar-box navbar-skin">
        <div class="navbar-menu">
            <a v-link="{ path: '/' }" class="navbar-item logo" :class="{'active':$route.name == '/'}" title="首页">
                博
            </a>
            <a v-link="{ path: '/search' }" class="navbar-item" :class="{'active':$route.name == 'search'}" title="搜索">
                <i class="fa fa-search" aria-hidden="true"></i>
            </a>
        </div>

        <div class="navbar-expanded">
            <div>
                <a class="navbar-item change-mode" href="javascript:;" @click="changeMode()">
                    <i v-if="styleMode === 'day-mode'" class="fa fa-moon-o"></i>
                    <i v-else class="fa fa-sun-o"></i>
                </a>
            </div>
            <div v-if="auth.token && auth.user">
                <a href="javascript:;" class="navbar-item expanded-logout" @click="logout()" title="登出">
                    <i class="fa fa-sign-out"></i>
                </a>
                <a v-link="{ path: '/mine' }" href="javascript:;" class="navbar-item expanded-avatar" title="{{auth.user.nickname}}">
                    <img :src="auth.user.avatar || defaultAvatar" />
                </a>
            </div>
            <div v-else>
                <a v-link="{ path: '/sign_up',activeClass:'active' }" class="navbar-item" title="注册">
                    <i class="fa fa-user-plus"></i>
                </a>
                <a v-link="{ path: '/login',activeClass:'active' }" class="navbar-item" title="登录">
                    <i class="fa fa-sign-in"></i>
                </a>
            </div>
        </div>
    </div>
</template>
<style>

</style>